<!--
 * @Author: your name
 * @Date: 2021-12-04 08:39:53
 * @LastEditTime: 2021-12-04 09:07:46
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /carbon/project/carbon/src/views/Wallet/index.vue
-->
<template>
  <div class="wallet-container">
    <div class="token-container">
    </div>
    <div class="exchange-container" >
      <token-swap />
    </div>
    <div class="tokenItem-container">
      <token-list-info v-loading="TokenItemLoading"
                       element-loading-text="正在加载中"
                       element-loading-spinner="el-icon-loading"
                       ref="child"
                       @childLoadStatus="childLoadStatusInfo"

      />
    </div>


  </div>
</template>

<script>
import * as echarts from "echarts";
import TokenListInfo from "./components/TokenItem"
import TokenSwap from "./components/TokenSwap"
import { Notification } from 'element-ui';
export default {
  components:{
    TokenListInfo,
    TokenSwap
  },
  data(){
    return{
      TokenItemLoading:true
    }
  },
  mounted() {
    this.TokenCenterJS.Init(add=>{
      //得到相应的钱包地址
      console.log(add)
    })
    this.fn()
  },
  methods:{
    childLoadStatusInfo(val){
     if(val === true){
       this.TokenItemLoading = false
     }
    },
    fn() {
      ethereum.on("accountsChanged", accounts => {
        this.TokenCenterJS.setMsgSender(accounts[0])
        Notification.success("您已切换账号")
      });
    },

  }
};
</script>

<style scoped lang="less">
.wallet-container {
  padding: 0 200px;
}
.exchange-container {
  background-color: antiquewhite;
}
.tokenItem-container {
  margin-top: 20px;
  box-shadow: 0 1px 5px rgb(195, 186, 186);
  border-radius: 40px;
}
</style>
